<template>
	<view class="category">
		<!-- 搜索 -->
		<view class="header">
			<view class="search">
				商品搜索
			</view>
		</view>
		<!-- 内容区 -->
		<view class="content">
			<view class="left">
				<scroll-view class="navScroll" scroll-y="true" >
					<view 
						class="navItem" 
						:class="{active:index===navIndex}" 
						v-for="(item,index) in categoryData" 
						:key="item.id" 
						@click="changeNavIndex(index)"
					>
						{{item.name}}
					</view>
				</scroll-view>
			</view>
			<view class="right">
				<scroll-view class="categoryScroll" scroll-y="true" >
					<image class="categoryImg" :src="cateObj.imgUrl" mode=""></image>
					<view class="goodsList">
						<view class="goodsItem" v-for="item in cateObj.subCateList" :key="item.id">
							<image class="goodsImg" :src="item.wapBannerUrl" mode=""></image>
							<view class="goodsName">
								{{item.name}}
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '../../utils/request.js'
	export default {
		data() {
			return {
				categoryData: [],
				navIndex: 0,
			};
		},
		mounted() {
			this.getCategory()
		},
		computed: {
			cateObj() {
				return this.categoryData[this.navIndex]
			}
		},
		methods: {
			async getCategory() {
				const res = await request('/getCategoryDatas')
				// console.log(res);
				this.categoryData = res.categoryDatas
			},
			changeNavIndex(index) {
				this.navIndex = index
			}
		},
	}
</script>

<style lang="less">
	.category {
		.header {
			padding: 20rpx 0;
			.search {
				width: 90%;
				height: 60rpx;
				line-height: 60rpx;
				background-color: #ddd;
				border-radius: 4rpx;
				font-size: 30rpx;
				margin: 0 auto;
				text-align: center;
			}
		}
		.content {
			display: flex;
			border-top: 1rpx solid black;
			height: calc(100vh - 102rpx);
			.left {
				width: 20%;
				border-right: 1rpx solid black;
				// background-color: #ccc;
				height: 100%;
				.navScroll {
					height: calc(100vh - 102rpx);
					.navItem {
						height: 70rpx;
						line-height: 70rpx;
						font-size: 26rpx;
						text-align: center;
						position: relative;
						&.active::before {
							content: '';
							width: 2rpx;
							height: 50rpx;
							background-color: red;
							position: absolute;
							left: 10rpx;
							top: 10rpx;
						}
					}
				}
			}
			.right {
				width: 80%;
				height: 100%;
				// background-color: #ddd;
				.categoryScroll {
					height: calc(100vh - 102rpx);
					.categoryImg {
						width: 520rpx;
						height: 200rpx;
						display: block;
						margin: 10rpx auto;
					}
					.goodsList {
						display: flex;
						flex-wrap: wrap;
						.goodsItem {
							width: 33.33%;
							height: 200rpx;
							text-align: center;
							.goodsImg {
								width: 90%;
								height: 140rpx;
							}
							.goodsName {
								font-size: 24rpx;
							}
						}
					}
				}
			}
		}
	}
</style>
